/* eslint-disable */
import React from 'react'
import PropTypes from 'prop-types'
import { inject, observer } from 'mobx-react'
import { withStyles } from '@material-ui/core/styles'
import CircularProgress from '@material-ui/core/CircularProgress'
import Helmet from 'react-helmet'
import marked from 'marked'
import dateformat from 'dateformat'

import Paper from '@material-ui/core/Paper'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import Send from '@material-ui/icons/Send'

import Reply from './reply'
import { topicDetailStyle } from './styles'
import Container from '../layout/container'

@inject((stores) => {
  return {
    appState: stores.appState,
    topicStore: stores.topicStore,
  }
}) @observer
class TopicDetail extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      newReply: '',
    }

    this.goToLogin = this.goToLogin.bind(this)
    this.handleReply = this.handleReply.bind(this)
    this.handleContent = this.handleContent.bind(this)
  }

  componentDidMount() {
    this.props.topicStore.fetchTopic(this.getTopicID()).catch(err => {
      console.log('detail did mount error:', err)
    })
  }

  handleContent(e) {
    this.setState({
      newReply: e.target.value,
    })
  }

  goToLogin() {
    this.props.history.push('/login')
  }

  handleReply() {
    this.getTopicDetail().doReply(this.state.newReply)
      .then(() => {
        this.setState({
          newReply: '',
        })
        this.props.appState.notify({ message: '评论成功' })
      })
      .catch(() => {
        this.props.appState.notify({ message: '评论失败' })
      })
  }

  getTopicID() {
    return this.props.match.params.id
  }

  getTopicDetail() {
    return this.props.topicStore.detailsMap[this.getTopicID()]
  }

  render() {
    const classes = this.props.classes
    const topic = this.getTopicDetail()

    if (!topic) {
      return (
        <Container>
          <section className={classes.loadingContainer}>
            <CircularProgress color="secondary" />
          </section>
        </Container>
      )
    }

    return (
      <div>
        <Container>
          <Helmet>
            <title>{topic.title}</title>
          </Helmet>

          <header className={classes.header}>
            <h3>{topic.title}</h3>
          </header>

          <section className={classes.body}>
            <p dangerouslySetInnerHTML={{ __html: marked(topic.content) }}/>
          </section>
        </Container>

        <Paper elevation={4} className={classes.replies}>
          <div className={classes.replyHeader}>
            <span>{`${topic.reply_count} 回复`}</span>
            <span>{`最新回复 ${dateformat(topic.last_reply_at, 'yy年mm月dd日')}`}</span>
          </div>
          {
            !this.props.appState.user.isLogin ?
              (
                <div className={classes.notLoginButton}>
                  <Button raised="true" color="primary" onClick={this.goToLogin}>登录进行回复</Button>
                </div>
              ) : (
                <div className={classes.replyEditor}>
                  <TextField
                    id="content"
                    label="Content"
                    multiline
                    fullWidth
                    value={this.state.newReply}
                    onChange={this.handleContent}
                    className={classes.textField}
                    margin="normal"
                    helperText="Markdown"
                    variant="outlined"
                  />
                  <Button fab="true" color="primary" onClick={this.handleReply} className={classes.replyButton}>
                    <Send />
                  </Button>
                </div>
              )
          }

          <section>
            {
              topic.replies.map(reply => {
                return (<Reply reply={reply} key={reply.id} />)
              })
            }
          </section>

        </Paper>
      </div>
    )
  }
}

TopicDetail.wrappedComponent.propTypes = {
  appState: PropTypes.object.isRequired,
  topicStore: PropTypes.object.isRequired,
}

TopicDetail.propTypes = {
  match: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
}


export default withStyles(topicDetailStyle)(TopicDetail)
